<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" :model="q" size="mini">
        <el-form-item label="时间:">
          <el-date-picker v-model="q.day_start" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="开始日期" :picker-options="pickerStart"></el-date-picker>
          <span>-</span>
          <el-date-picker v-model="q.day_end" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="结束日期" :picker-options="pickerEnd"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <!-- <el-button type="danger" @click="reload">重置</el-button> -->
          <el-button size="mini" @click="uploadWordOrder" type="success">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table class="el-calendar-table" :data="listData.items" v-loading.body="listLoading" size="mini" stripe border
      fit highlight-current-row>
      <el-table-column prop="day" label="日期" width="90"></el-table-column>
      <el-table-column label="汇总" width="50">
        <template slot-scope="scope">
          <span>{{scope.row.day_count}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="0" label="0" min-width="50"></el-table-column>
      <el-table-column prop="1" label="1" min-width="50"></el-table-column>
      <el-table-column prop="2" label="2" min-width="50"></el-table-column>
      <el-table-column prop="3" label="3" min-width="50"></el-table-column>
      <el-table-column prop="4" label="4" min-width="50"></el-table-column>
      <el-table-column prop="5" label="5" min-width="50"></el-table-column>
      <el-table-column prop="6" label="6" min-width="50"></el-table-column>
      <el-table-column prop="7" label="7" min-width="50"></el-table-column>
      <el-table-column prop="8" label="8" min-width="50"></el-table-column>
      <el-table-column prop="9" label="9" min-width="50"></el-table-column>
      <el-table-column prop="10" label="10" min-width="50"></el-table-column>
      <el-table-column prop="11" label="11" min-width="50"></el-table-column>
      <el-table-column prop="12" label="12" min-width="50"></el-table-column>
      <el-table-column prop="13" label="13" min-width="50"></el-table-column>
      <el-table-column prop="14" label="14" min-width="50"></el-table-column>
      <el-table-column prop="15" label="15" min-width="50"></el-table-column>
      <el-table-column prop="16" label="16" min-width="50"></el-table-column>
      <el-table-column prop="17" label="17" min-width="50"></el-table-column>
      <el-table-column prop="18" label="18" min-width="50"></el-table-column>
      <el-table-column prop="19" label="19" min-width="50"></el-table-column>
      <el-table-column prop="20" label="20" min-width="50"></el-table-column>
      <el-table-column prop="21" label="21" min-width="50"></el-table-column>
      <el-table-column prop="22" label="22" min-width="50"></el-table-column>
      <el-table-column prop="23" label="23" min-width="50"></el-table-column>   
    </el-table>
    <!-- <div class="pagination">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.page_no"
        :page-sizes="$store.state.app.pageSizeArr" :page-size="q.page_size"
        layout="total, sizes, prev, pager, next, jumper" :total="listData.total">
      </el-pagination>
    </div> -->
  </div>
</template>

<script>
import { getSegmentList, uploadSegmentData } from '@/api'
import { queryFilter } from '@/utils/patch'

export default {
  name: "index",
  data () {
    return {
      listData: {},
      q: {page_size: 30, page_no: 1},
      listLoading: false,
      pickerStart: {
        disabledDate(time) {
            return time.getTime() > Date.now();
        }
      },
      pickerEnd: {
        disabledDate(time) {
            return time.getTime() > Date.now();
        }
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    query () {
      this.q = Object.assign(this.q, { page_no: 1, page_size: 30 })
      this.getList()
    },
    reload () {
      this.q = { page_no: 1, page_size: 30 }
      this.getList()
    },
    // handleSizeChange (val) {
    //   this.q.page_size = val
    //   this.getList()
    // },
    // handleCurrentChange (val) {
    //   this.q.page_no = val
    //   this.getList()
    // },
    getList () {
      let queryObj = queryFilter(this.q)
       this.listLoading = true
      getSegmentList(queryObj).then(res => {
        console.log(res,'---09')
        if (res.status === 0) {
          this.listLoading = false
          this.listData = res.data
        }
      })
    },
    uploadWordOrder(){
      this.$confirm(`确认下载详情么？`, '下载详情', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.uploadData = Object.assign(this.q, {page_no: 1, page_size: 30})
        console.log(this.uploadData)
        uploadSegmentData(this.uploadData).then(res => {
          console.log(res, 'data', this.uploadData)
          if(res.status === 0&&res.data.url){
            window.location = res.data.url;
            this.$message({ type: 'success', message: '可成功进行下载' });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消下载'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消下载'
        })
      })
    },
  }
}
</script>

<style scoped>
.el-form-item__label {
  width: 100px !important;
}
</style>
